<template>
  <div class="point-group-container">
    <!--修改颜色-->
    <div v-if="pointArr.length==0"
         style="padding:50px 0 50px 0;font-size: 16px;letter-spacing: 1px;font-weight: normal;background-color: #fff;color:#888888">

      <center><img src="../../../assets/zwsj.png" width="103px" height="120px"></img>
        <p>暂无数据</p></center>
    </div>
    <!--//修改颜色/*padding:10px;background:#79b7ff;*/-->
    <div v-else style="cursor:pointer;">
      <el-row :gutter="5" style="padding: 0px;cursor:pointer;">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="allplc" @click="all(pointArr[0].classType)">
            <div class="plcclassname">
              {{pointArr[0].className}}
            </div>
            <div>
              <!--冷却水包盖仪表盘-->
              <point-num psMsg="1" :plcdatanum="pointArr[0].pointClassArr"></point-num>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="allplc" @click="all(pointArr[1].classType)">
            <div class="plcclassname">
              {{pointArr[1].className}}
            </div>
            <div>
              <!--冷却水氧枪仪表盘-->
              <point-num psMsg="2" :plcdatanum="pointArr[1].pointClassArr"></point-num>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="allplc" @click="all(pointArr[2].classType)">
            <div class="plcclassname">
              {{pointArr[2].className}}
            </div>
            <div>
              <!--燃气仪表盘-->
              <gas-point-num psMsg="3" :plcdatanum="pointArr[2].pointClassArr"></gas-point-num>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="allplc" @click="all(pointArr[3].classType)">
            <div class="plcclassname">
              {{pointArr[3].className}}
            </div>
            <div>
              <!--氧气仪表盘-->
              <oxygen-point-num psMsg="4" :plcdatanum="pointArr[3].pointClassArr"></oxygen-point-num>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="allplc" @click="all(pointArr[4].classType)">
            <div class="plcclassname">
              {{pointArr[4].className}}
            </div>
            <div>
              <!--煤粉仪表盘-->
              <gum-point-num psMsg="5" :plcdatanum="pointArr[4].pointClassArr"></gum-point-num>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import socketio from 'socket.io-client';
  import _ from 'underscore';
  import PointView from '@/components/PointView'
  import DigitalView from '@/components/DigitalView'
  import AnalogView from '@/components/AnalogView'
  import {getUserInfo} from "../../../utils/auth";
  import config from '../../../../config'
  import PointNum from '@/components/PointNum'
  import GasPointNum from '@/components/GasPointNum'
  import OxygenPointNum from '@/components/OxygenPointNum'
  import GumPointNum from '@/components/GumPointNum'

  export default {
    name: "PointGroup",
    components: {PointView, DigitalView, AnalogView, PointNum, GasPointNum, OxygenPointNum, GumPointNum},
    mounted() {
      console.log(config.dev.proxyTable['/api'].target);
    },
    computed: {
      ...mapGetters(['plcId', 'plcIdSelIndex', 'plcIdSelIndex'])
    },
    //
    watch: {
      plcId(device_id) {
        let comp = this;
        comp.device_id = device_id;
        comp.sel_index = this.$store.getters.plcIdSelIndex;
        if (this.socket) this.socket.destroy();//如果socket存在 销毁socket
        //重新创建socket
        this.socket = socketio(config.dev.proxyTable['/api'].target);
        this.socket.emit('allPointView', {device_id: device_id, user_id: getUserInfo().user_id}, function (a, b) {
        });

        //添加侦听器
        this.socket.on('allPointView', function (dataA, b) {
          let data = dataA.deviceData;
          //传入数据
          if (data.data) {
            comp.pointArr = data.data;
          } else {
            comp.pointArr = [];
          }

          comp.pointtime = data.time;
          document.getElementById('time').innerHTML = '';
          if (data.time) {
            document.getElementById('time').innerHTML = data.time;
          }

          //取消lodaing
          let vm = comp.$store;
          vm.commit('updateLoading', false);

          /*  _.where的意思是从一堆数组中找到所匹配的时间
            _.where(listOfPlays, {author: "Shakespeare", year: 1611});
          => [{title: "Cymbeline", author: "Shakespeare", year: 1611},
              {title: "The Tempest", author: "Shakespeare", year: 1611}]*/
          /*  let temperatureData = _.where(data.data, {point_sign: 1}).shift();
            let openData = _.where(data.data, {point_sign: 2}).shift();
            let plcDataObj = {dataTime: data.time};
            if (temperatureData) plcDataObj.td = temperatureData.value;
            if (openData) plcDataObj.od = openData.value;*/
          let plcDataObj = {dataTime: data.time};
          if (data.temperatureValue) plcDataObj.td = data.temperatureValue;
          if (data.flowValue) plcDataObj.od = data.flowValue;
          //氧气流量显示值
          if (data.oxFlowValue) plcDataObj.oxd = data.oxFlowValue;


          //数据全局化
          comp.$store.dispatch('plc/setPlcRealTimeData', plcDataObj);
          console.log(comp.pointArr.length);
        });
      },
      diglogType(type) {

      }

    },
    data() {
      return {
        pointArr: [],
        pointtime: '',
        socket: null,
        visible: false,
        title: '',
        diglogType: null,
        sendPointId: null,
        digitalChange: false,
        analogChange: false,
        device_id: 0,
        sel_index: 0

      }
    },
    beforeDestroy() {
      this.$store.dispatch('plc/setPlcId', null);//调取方法
      this.$store.dispatch('plc/setPlcIdSelIndex', null);
      if (this.socket) this.socket.destroy();//销毁socket
      console.log('destroy');
    },
    methods: {
      all(classType) {
        let vm = this.$store;
        vm.commit('updateLoading', true);
        this.$store.dispatch('plc/setPlcIdChangeSelIndex', this.$store.getters.plcIdSelIndex);
        this.$router.push({
          name: 'pointDetail',
          params: {classType: classType, device_id: this.device_id, sel_index: this.sel_index}
        });//push是跳转页面 params传值过去
      }
    }
  }
</script>
<style scoped>
  .plcclassname {
    text-align: center;
    font-size: 20px;
    margin: 10px;
    font-weight: bold;
    color: #fff;
  }

  .numname {
    font-size: 12px;
    margin: 10px;
    font-weight: bold;
    color: #b1b1b1;
  }

  /* .allplc{
    !* height:260px;*!
     margin:2px;
     border: 5px solid rgba(255,255,255,.1);
   }
   .allplc:hover{
     border: 5px solid #555777;
   }*/
  .allplc {
    cursor: pointer;
    height: 260px;
    background: none;
    border: 0;
    box-sizing: border-box;
    margin: 2px;
    border: 2px solid rgba(77, 86, 103, 0.8);
    box-shadow: -1px 0px 11px 9px rgba(77, 86, 103, 0.3) inset;
    /*
        box-shadow: inset 0 0 0 5px #eee;
    */
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
  }

  .allplc::before, .allplc::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .allplc {
    transition: color 0.25s;
  }

  .allplc::before, .allplc::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  .allplc::before {
    top: 0;
    left: 0;
  }

  .allplc::after {
    bottom: 0;
    right: 0;
  }

  .allplc:hover .plcclassname {
    color: #d0f7f9;
  }

  .allplc:hover {
    cursor: pointer;
  }

  .allplc:hover::before, .allplc:hover::after {

    width: 100%;
    height: 100%;
  }

  .allplc:hover::before {
    border-top-color: #d0f7f9;
    border-right-color: #d0f7f9;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  }

  .allplc:hover::after {
    border-bottom-color: #d0f7f9;
    border-left-color: #d0f7f9;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  }

  .backg {
    background-color: #4c4b55;

  }

  @-webkit-keyframes breathe {
    from {
      opacity: 0.3;

    }
    50% {
      opacity: 1;

    }
    to {
      opacity: 0.3;

    }
  }

  .breathA {
    float: left;
    margin: 30px 20px 20px 0;
    text-indent: -999em;
    height: 30px;
    width: 30px;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 90px;
  }

  .greenLight {
    background: #b0ff3b;
    color: #00ff51;
    opacity: 0.1;
    -webkit-box-shadow: 0 0 5px #b0ff3b;
    -moz-box-shadow: 0 0 5px #b0ff3b;
    -ms-box-shadow: 0 0 5px #b0ff3b;
    -o-box-shadow: 0 0 5px #b0ff3b;
    box-shadow: 0 0 5px #b0ff3b;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 3s; /*人的普通呼吸时间是3秒每次，深呼吸时间是6秒每次*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    margin-left: 43%;
  }

  .greencollor {
    color: #b0ff3b;
    background: #b0ff3b;
    opacity: 0.3;
    margin-left: 43%;
  }

  .redLight {
    background: #ff5260;
    color: #ff8e87;
    opacity: 0.1;
    -webkit-box-shadow: 0 0 5px #ff5260;
    -moz-box-shadow: 0 0 5px #ff5260;
    -ms-box-shadow: 0 0 5px #ff5260;
    -o-box-shadow: 0 0 5px #ff5260;
    box-shadow: 0 0 5px #ff5260;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 3s; /*人的普通呼吸时间是3秒每次，深呼吸时间是6秒每次*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
  }

  .redcollor {
    color: #ff5260;
    background: #ff5260;
    opacity: 0.3;
  }

  .el-dialog__header {
    background: #32363c;

  }

  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #ffffff;
  }
</style>
<style lang="scss" scoped>

</style>


